Skip to content

feat: add Embla Auto Scroll plugin support with editor controls#152

Merged
danish17 merged 16 commits into
rtCamp:developfrom
aadil42:feat/146-autoScroll-support
Jul 7, 2026
Merged

feat: add Embla Auto Scroll plugin support with editor controls#152
danish17 merged 16 commits into
rtCamp:developfrom
aadil42:feat/146-autoScroll-support

Conversation

@aadil42

@aadil42 aadil42 commented Jun 6, 2026

Copy link
Copy Markdown
Contributor

Summary

Describe the change and why it is needed.

Adds first-class support for Embla's Auto Scroll plugin so rtCarousel can create smooth, continuous scrolling carousels in addition to the existing slide-by-slide Autoplay behavior.
rtCarousel already supports many Embla predefined examples including loop, RTL, slides to scroll, drag free, alignment, y-axis, autoplay, dots, controls, counter, and progress. However, continuous scrolling via the Auto Scroll plugin was not yet supported.
The existing Autoplay feature advances one snap at a time after a delay — ideal for hero sliders and testimonials. Auto Scroll fills the gap for logo strips, partner showcases, announcement tickers, and marquee-style carousels where users expect continuous motion.

Type of change

  • Bug fix
  • New feature
  • Enhancement/refactor
  • Documentation update
  • Test update
  • Build/CI/tooling

Related issue(s)

Closes #146

Relates to # (if applicable)

What changed

  • Installed embla-carousel-auto-scroll package and imported AutoScroll plugin in view.ts
  • Added 6 new block attributes: autoScroll, autoScrollSpeed, autoScrollDirection, autoScrollStartDelay, autoScrollStopOnInteraction, autoScrollStopOnMouseEnter
  • Added "Auto Scroll" inspector panel with all editor controls (toggle, speed, direction, start delay, stop on interaction, stop on mouse enter)
  • Auto Scroll and Autoplay are mutually exclusive — enabling one disables the other
  • Enabling "Backward" direction automatically enables Loop (required for continuous backward scrolling)
  • Loop toggle is disabled when direction is Backward, with contextual help text
  • Updated save.tsx to pass Auto Scroll config to frontend via data-wp-context
  • Updated CarouselContext and CarouselAttributes types in types.ts
  • Added unit tests for Auto Scroll context configuration in view.test.ts and edit.test.tsx

Breaking changes

Does this introduce a breaking change? If yes, describe the impact and migration path below.

  • Yes — migration path:
  • No

Testing

Describe how this was tested.

  • Unit tests
  • Manual testing
  • Cross-browser testing (if UI changes)

Test details:

Screenshots / recordings

Uploading compressed Screen Recording 2026-06-06 at 7.mp4…

Checklist

  • I have self-reviewed this PR
  • I have added/updated tests where needed
  • I have updated docs where needed
  • I have checked for breaking changes

@justlevine justlevine left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lot of failures when running npm run lint:js (most can be autofixed) and npm run lint:js:types.

Did not build and test manually because of 👆, but a cursory glance at the diff looks clean.

@aadil42

aadil42 commented Jul 5, 2026

Copy link
Copy Markdown
Contributor Author

Hey Dovid, I will take a look at it tomorrow. It's kind of late here. Gonna hit the bed.

@aadil42

aadil42 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor Author

Afternoon guys.

I have taken care of the linting errors and fixed type errors.

npm run lint:js output

image

npm run lint:js:types output.

image

We have one type error but that is taken care of in our rtCamp/rt-carousel:develop branch here's the commit that fixes this.
image

@justlevine please take a look.

Comment thread src/blocks/carousel/block.json Outdated
Comment thread src/blocks/carousel/edit.tsx Outdated
Comment thread src/blocks/carousel/edit.tsx Outdated
@aadil42

aadil42 commented Jul 7, 2026

Copy link
Copy Markdown
Contributor Author
Compressed.Screen.Recording.2026-07-07.at.4.mp4

@milindmore22 Have a look.

Comment thread src/blocks/carousel/edit.tsx Outdated
We should force loop to true ONLY when enabling Auto Scroll with a backward direction

@milindmore22 milindmore22 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@milindmore22 milindmore22 dismissed justlevine’s stale review July 7, 2026 13:49

Dismissing the review as linting issues pointed out with npm run lint:js and npm run lint:types both are fixed and covered in previous commits

@danish17 danish17 merged commit 9e190c1 into rtCamp:develop Jul 7, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Add Embla Auto Scroll support

4 participants